<template>
    <span @click="sort">
      <slot></slot>
      <span class="caret-wrapper">
        <i class="sort-caret ascending" :style="ascending" @click.stop="sortChange('ascending')" />
        <i class="sort-caret descending" :style="descending"  @click.stop="sortChange('descending')" />
      </span>
    </span>
</template>

<script>
  export default {
    name: "tabelSortHead",
    props: {
      keyCode: {
        String
      },
      currentKey: String
    },
    computed: {
      ascending() {
        return {
          borderBottomColor: this.currentSort === 'ascending' && this.currentKey === this.keyCode ? '#409EFF' : '#C0C4CC'
        }
      },
      descending() {
        return {
          borderTopColor: this.currentSort === 'descending' && this.currentKey === this.keyCode ? '#409EFF' : '#C0C4CC'
        }
      }
    },
    data() {
      return {
        currentSort: '',
        click: 0
      }
    },
    methods: {
      sort() {
        if (this.currentSort === 'descending') {
          this.currentSort = ''
        } else {
          if (this.currentSort === '') {
            this.currentSort = 'ascending'
          } else {
            this.currentSort = 'descending'
          }
        }
        this.$emit('sort-change', {
          order: this.currentSort,
          prop: this.keyCode
        });
      },
      sortChange(order) {
        if (this.currentSort === order) {
          this.currentSort = '';
        } else {
          this.currentSort = order
        }
        this.$emit('sort-change', {
          order,
          prop: this.keyCode
        });
      }
    }
  }
</script>

<style scoped>

</style>
